<!-- 网电咨询记录 -->
<template>
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-row type="flex" justify="space-between" class="mt10" style="margin-top:0px">
        <!-- <el-col>
        <el-form-item>
          <el-input v-model="searchForm.customerName" placeholder="姓名、手机号、编号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
        </el-form-item>
      </el-col> -->
        <el-form ref="searchFormRef" :model="searchForm" label-width="80px" :inline="true">
          <el-col :span="12" class="searchs-y">
            <el-form-item>
              <el-input v-model="searchForm.customerName" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="2" class="buttons">
          <el-button style="float:right;margin-top: 15px;" @click="addConsultingBtn">+增加咨询</el-button>
        </el-col>
      </el-row>
      <el-row class="mt10" type="flex">
        <Search :data="yTSDay" :attribute="'advisoryTime'" @dateChange="handleDateChange" @change="handleTypeChange" />
        <el-form :model="searchForm" label-width="80px" :inline="true" class="dictSelector">
          <el-select v-model="searchForm.advisoryClassification" class="el-select-y" placeholder="请选择咨询分类" clearable @change="handleFaceDoctor">
            <el-option v-for="item in faceDoctorOptions" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form>
      </el-row>
      <el-row class="mt10" style="margin-bottom:10px">
        <TypeSelection class="TypeSelection" :data="filtrateList" :default-value="searchForm.result" :on-change="handleConditionChange" />
      </el-row>
    </div>
    <!-- 表格区域 -->
    <div class="box-show" :style="'height:'+ (innerHeight + 92) + 'px'">
      <el-table v-loading="loading" :data="chargeList" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="咨询时间" prop="advisoryTime" :show-overflow-tooltip="true" />
        <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="电话" prop="customerPhone" :show-overflow-tooltip="true" />
        <el-table-column label="性别" prop="customerSex" :show-overflow-tooltip="true" />
        <el-table-column label="咨询分类" prop="consultTypeName" :show-overflow-tooltip="true" />
        <el-table-column label="咨询结果" prop="result" :show-overflow-tooltip="true" />
        <el-table-column label="预约时间" prop="apendTime" :show-overflow-tooltip="true" min-width="120" />
        <el-table-column label="预约状态" prop="appointmentStatus" :show-overflow-tooltip="true" />
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="lookRecordBtn(scope.row,chargeList)">咨询记录</el-button>
            <el-button v-if="scope.row.appointmentStatus==='已到达'&&scope.row.result==='上门'" type="text" @click="lookSubscribeBtn(scope.row)">查看预约</el-button>
            <el-button v-if="scope.row.result==='不上门'" type="text" @click="addConsultingBtn(scope.row)">再次咨询</el-button>
            <el-button v-if="scope.row.appointmentStatus==='预约中'&&scope.row.result==='上门'" type="text" @click="editSubscribeBtn(scope.row)">修改预约</el-button>
            <el-button v-if="scope.row.appointmentStatus==='预约中'&&scope.row.result==='上门'" type="text" @click="cancelSubscribeBtn(scope.row)">取消预约</el-button>
            <el-button v-if="(scope.row.appointmentStatus==='已取消'||scope.row.appointmentStatus==='已过期')&&scope.row.result==='上门'" type="text" @click="againSubscribeBtn(scope.row)">重新预约</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <!-- 添加咨询 -->
    <Add-consulting ref="addConsultingRef" :visible.sync="visible" :title="title" :text-btn="textBtn" @success="getChargeList" />
    <LookRecord ref="lookRecordRef" :visible.sync="recordVisible" :title="title" />
    <Subscribe ref="addSubscribeRef" :title="title" :text-btn="textBtn" :visible.sync="subscribeVisible" :flag="false" @success="getChargeList" />
  </div>
</template>
<script>
event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
// import { DictionarySelector } from "@rabbit.do/rabbit";
import { TypeSelection } from "@monkey.do/monkey";
import Search from "@/components/Search";
import { yTSDay } from "@/config";
import AddConsulting from "./dialog";
import LookRecord from "./record";
import Subscribe from "../../reception/subscribe/management/dialog";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    // DictionarySelector,
    TypeSelection,
    Search,
    AddConsulting,
    LookRecord,
    Subscribe,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      yTSDay,
      filtrateList: [
        {
          name: '全部',
          id: '上门,不上门',
        },
        {
          name: '上门',
          id: '上门,',
        },
        {
          name: '不上门',
          id: '不上门,',
        },
      ],
      searchForm: {
        result: '上门,不上门',
        faceDoctorId: undefined,
        advisoryType: '网电咨询',
      },
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      options: [],
      faceDoctorOptions: [],
      chargeList: [],
      paramsData: {},
      requests: {},
      title: "",
      textBtn: "",
      visible: false,
      recordVisible: false,
      subscribeVisible: false,
      loading: false,
    };
  },
  mounted() {
    this.getChargeList();
    this.getFaceDoctorData();
    this.timer = setInterval(() => {
      this.getChargeList();
    }, 1000 * 60);
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    handleChange() {
      this.params.page = 1;
      this.getChargeList();
    },
    async getChargeList() {
      if (!this.searchForm.advisoryTime) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        this.searchForm.timeType = "today";
        this.searchForm.advisoryTime = beginTime + "_" + endTime;
      }
      this.loading = true;
      const res = await this.$api['doctor/consulting/listed']({ ...this.params, query: this.searchForm });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询咨询记录列表失败！');
      this.chargeList = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getChargeList();
    },
    // 搜索
    searchBtn() {
      this.getChargeList();
    },
    // 网电咨询
    addConsultingBtn(row) {
      this.title = "网电咨询";
      this.textBtn = '保存';
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.addConsultingRef.addConsulting(row);
      });
    },
    // 咨询分类
    async getFaceDoctorData() {
      const res = await this.$api["reception/subscribe/consulttype"]();
      if (res.code === 200) {
        this.faceDoctorOptions = res.data.result;
      }
    },
    // 查看记录
    lookRecordBtn(row, chargeList) {
      this.title = "网电咨询记录";
      this.recordVisible = true;
      this.$refs.lookRecordRef.recordBtn(row, chargeList);
    },
    lookSubscribeBtn(row) {
      this.title = "查看预约";
      this.textBtn = "确认";
      this.flag = false;
      this.subscribeVisible = true;
      this.requests.appointmentStatus = '已过期';
      row.receiverName = row.consultantName;
      this.$refs.addSubscribeRef.lookBtn(row, this.searchForm);
    },
    // 修改预约
    editSubscribeBtn(row) {
      this.title = "修改预约";
      this.textBtn = "提交";
      this.flag = false;
      this.subscribeVisible = true;
      this.requests.appointmentStatus = '预约中';
      row.receiverName = row.consultantName;
      row.id = row.appointmentId;
      this.$refs.addSubscribeRef.addSubscribeBtn(row, this.searchForm);
    },
    // 取消预约
    async cancelSubscribeBtn(row) {
      this.title = "取消预约";
      this.textBtn = "提交";
      this.flag = false;
      this.subscribeVisible = true;
      this.requests.appointmentStatus = '已过期';
      row.receiverName = row.consultantName;
      row.id = row.appointmentId;
      if (row.appointmentType === '是') {
        row.appointmentType = '咨询预约';
      }
      this.$refs.addSubscribeRef.cancelBtn(row, this.searchForm);
    },
    againSubscribeBtn(row) {
      this.title = "重新预约";
      this.textBtn = "提交";
      this.flag = false;
      this.subscribeVisible = true;
      this.requests.appointmentStatus = '预约中';
      row.receiverName = row.consultantName;
      row.id = row.appointmentId;
      this.$refs.addSubscribeRef.addSubscribeBtn(row, this.searchForm);
    },
    // 顶部时间筛选
    handleDateChange(val) {
      this.searchForm.advisoryTime = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleTypeChange(val) {
      this.searchForm.advisoryTime = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleConditionChange(val) {
      this.searchForm.result = val.id;
      this.getChargeList();
    },
    handleFaceDoctor() {
      if (!this.searchForm.faceDoctorId) {
        this.searchForm.faceDoctorId = undefined;
      }
      this.getChargeList();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-autocomplete {
  width: 100%;
}

</style>
